<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/css/all.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css">
    <script type="text/javascript" src="static/js/jquery.js"></script>
    <script type="text/javascript" src="static/js/bootstrap.js"></script>
</head>
<?php
    session_start();

    include("include/header.php");
    include ("include/util.inc.php");


    $LEVELS = ["easy","medium","hard"];
    $res = $PDO->query("SELECT cname FROM category");
    $SIZES = [5,10,15];
    $SIZE_NAMES = ["short","medium","long"];

    $CATEGORYS = [];
    while($row=$res->fetch()){
        array_push($CATEGORYS,$row);
    }
?>

<body class="container bg">
<div class=" row container offset-xl-3">

    <div class="row mb-3">
        <div class="col-xl-2">
            <select class="form-select" id="level">
                <?php
                foreach ($LEVELS  as $LEVEL){
                    ?>
                    <option value="<?=$LEVEL?>"><?=$LEVEL?></option>
                    <?php
                }
                ?>
                <option value="">all</option>
            </select>
        </div>

        <div class="col-xl-2">
            <select class="form-select" id="category">
                <?php
                    for($i = 0; $i < count($CATEGORYS); $i= $i+1){
                        $row = $CATEGORYS[$i];
                    ?>
                    <option value="<?=$row["cname"]?>"><?=$row["cname"]?></option>
                    <?php
                }
                ?>
                <option value="">all</option>
            </select>
        </div>

        <div class="col-xl-1 offset-xl-1">

            <button class="btn btn-primary"  onclick="search()">search</button>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-3">
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon3">keyword1</span>
                <input type="text" class="form-control" id="answer" aria-describedby="basic-addon3" placeholder="word in answer">
            </div>
        </div>
        <div class="col-xl-3">
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon3">keyword2</span>
                <input type="text" class="form-control" id="question" aria-describedby="basic-addon3" placeholder="word in question">
            </div>
        </div>
    </div>

</div>
<div class="container">
    <div id="result" class="row col-xl-8 offset-xl-2">

    </div>
</div>
<div class="modal" tabindex="-1" id="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update question</h5>
                <input type="hidden" value="" id="qid">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 row">
                    <label for="staticEmail" class="col-sm-2 col-form-label">category</label>
                    <div class="col-sm-6">
                        <select class="form-select" id="newcategory">
                            <?php
                            foreach ($CATEGORYS  as $CATEGORY){
                                ?>
                                <option value="<?=$CATEGORY["cname"]?>"><?=$CATEGORY["cname"]?></option>
                                <?php
                            }
                            ?>
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <button class="btn btn-primary">+</button>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="staticEmail" class="col-sm-2 col-form-label">level</label>
                    <div class="col-sm-6">
                        <select class="form-select" id="newlevel">
                            <?php
                            foreach ($LEVELS  as $LEVEL){
                                ?>
                                <option value="<?=$LEVEL?>"><?=$LEVEL?></option>
                                <?php
                            }
                            ?>
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <button class="btn btn-primary">+</button>
                    </div>
                </div>
                <div class="mb-3 row">
                    <div class="col-sm-12">
                        <textarea class="form-control" id="newquestion" placeholder="" rows="3"></textarea>
                    </div>
                </div>
                <div class="mb-3 row">
                    <div class="col-sm-12">
                        <input type="text" class="form-control" id="newanswer">
                    </div>
                </div>



            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="save_change()">Save changes</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript" src="static/js/simpleAjax.js"></script>
<script>



    function  search() {
        var answer = document.getElementById("answer").value;
        var question = document.getElementById("question").value;

        var select = document.getElementById("category");
        var category = select.options[select.selectedIndex].value;

        select = document.getElementById("level");
        var level = select.options[select.selectedIndex].value;


        var result = document.getElementById("result");
        result.innerHTML = '';

        ajaxRequest("questionlist.php","get",{answer:answer,question:question,category:category,level:level},function () {
            var table = document.createElement("table")
            table.setAttribute("class","table table-hover table-bordered")
            table.innerHTML = this.responseText;
            result.appendChild(table)
        },function () {
        })
    }


    function delete_(tag){
        var qid = tag.value;
        ajaxRequest("delete_question.php","get",{qid:qid},function () {
            alert("delete "+qid+" success")
        },function () {
            alert("delete error")
        })
    }

    function parseResponse(responseText){
        return responseText.split('&');
    }


    function edit(tag){
        var qid = tag.value;

        ajaxRequest("select_by_qid.php","get",{qid:qid},function () {

            var row_array = parseResponse(this.responseText);
            document.getElementById("newquestion").innerText = row_array[0];
            document.getElementById("qid").setAttribute("value",qid);
            document.getElementById("newanswer").setAttribute("value",row_array[1]);

            var select = document.getElementById("newcategory");
            var options = select.getElementsByTagName("option");
            for(var i = 0; i < options.length; i++){
                if(options[i].value==row_array[2]){
                    options[i].setAttribute("selected","selected");
                }
            }

            select = document.getElementById("newlevel");
            options = select.getElementsByTagName("option");
            for(var i = 0; i < options.length; i++){
                if(options[i].value==row_array[3]){
                    options[i].setAttribute("selected","selected");
                }
            }
            $("#modal").modal("show");
        },function () {

        })

    }

    function save_change() {
        var qid = document.getElementById("qid").value;
        var newquestion = document.getElementById("newquestion").value;

        var newanswer = document.getElementById("newanswer").value;
        var select = document.getElementById("newcategory");
        var category = select.options[select.selectedIndex].value;

        select = document.getElementById("newlevel");
        var level = select.options[select.selectedIndex].value;

        ajaxRequest("update_question.php","get",{qid:qid,question:newquestion,answer:newanswer,category:category,level:level},function () {
            document.getElementById("close").click();
        },function () {
            alert("update error");
        })

    }
</script>